<template>
	<view class="content" :style="{'background-image': 'url(' + `${$hd.baseUrl}/images/${theme}/img-banner.png` + ')',
	'background-position-y': theme=='farmer'? '-30px;':0}">
		<uv-navbar :fixed="true" :safeAreaInsetTop="true" :bg-color="navSt">
			<template v-slot:left>
				<!-- <view class="uv-nav-slot">
					<uv-icon name="map-fill" size="22" color="#ffffff"></uv-icon>
					<view class="margin-left-xs">
						南宁
					</view>
				</view> -->
				<view class="padding-tb-xs padding-lr round" :class="theme == 'farmer'? 'bg-green': 'bg-main'"
					@click="changeLogin">
					<text class="margin-right-sm" v-if="theme=='farmer'">飞手切换</text>
					<text class="margin-right-sm" v-else>农户切换</text>
					<text class="cuIcon-order rote-90"></text>
				</view>
			</template>
			<template v-slot:center>
				<view class="text-white">
					首页
				</view>
				<!-- <button class="padding-tb-xs padding-lr round" :class="theme == 'farmer'? 'bg-green': 'bg-main'" size="mini" open-type="getPhoneNumber"
					@getphonenumber="getphonenumber">
					<text class="margin-right-sm" v-if="theme=='farmer'">飞手切换</text>
					<text class="margin-right-sm" v-else>农户切换</text>
					<text class="cuIcon-order rote-90"></text>
				</button> -->
			</template>
		</uv-navbar>

		<view class="banner-text">
			<template v-if="theme=='farmer'">
				<view class="gnpt-text">
					<view class="">
						桂鸟先飞
					</view>
					<view class="">
						打药吊运都在用！
					</view>
				</view>
				
			</template>
			<template v-else>
				<view class="gnzz-text">
					桂鸟大作战
				</view>
				<view class="ydnl-text">
					有“单”你快来
				</view>
			</template>
		</view>

		<view class="pos-wap padding" :class="theme">
			<view class="flex align-center" v-if="theme == 'fs'">
				<view class="flex-sub padding-tb-sm margin-right kf-service bg1 flex align-center justify-center"
					@click="custSevice">
					<image class="ic-img" :src="`${$hd.baseUrl}/images/icon-service.png`" mode="aspectFit"></image>
					<view class="text-white">
						<view class="text-lg margin-bottom-xs text-bold">客服服务</view>
						<text class="text-df">线上快捷资讯</text>
					</view>
				</view>
				<view class="flex-sub padding-tb-sm kf-service bg2 flex align-center justify-center"
					@click="onOrderList">
					<image class="ic-img" :src="`${$hd.baseUrl}/images/${theme}/icon-assignment.png`" mode="aspectFit">
					</image>
					<view class="text-white ">
						<view class="text-lg margin-bottom-xs text-bold">指派订单</view>
						<text class="text-df">便捷邀约接单</text>
					</view>
				</view>
			</view>
			<view class="flex align-center farmer" v-else>
				<view class="flex-sub padding-tb-sm margin-right kf-service bg1 flex align-center justify-center"
					@click="handleAddOrder(1)">
					打药
				</view>
				<view class="flex-sub padding-tb-sm kf-service bg2 flex align-center justify-center"
					@click="handleAddOrder(2)">
					吊运
				</view>
			</view>
			<!-- <view class="zp_box margin-bottom">
				<view class="zp-fl">
					<view class="flex align-center justify-between text-white padding-right">
						<view class="">
							<view class="text-xl text-bold margin-bottom-sm text-ita">
								指派订单
							</view>
							<view class="">
								<text class="margin-right">超便捷 </text>
								<text class="margin-right">免抢单 </text>
								<text class="margin-right"> 直派遣</text>
							</view>
						</view>
						<view class="ord-btn padding-lr-sm text-bold padding-tb-xs" @click="onOrderList">
							前往
						</view>
					</view>
				</view>
			</view> -->

			<!-- <view class="margin-top notice-box flex align-center" v-if="showNotice">
				<view class="notice-btn margin-left-sm">
					通知
				</view>
				<view class="flex-sub">
					<uv-notice-bar :icon="false" :color="theme=='fs'?'#FE3566':'#EB872A'" bgColor='#FFF0D3'
						:text="noticeText" mode="closable" @close="closeNotice"></uv-notice-bar>
				</view>
			</view> -->

			<view v-if="theme=='farmer'" class="margin-top padding-tb-xs notice-box flex align-center">
				<view class="notice-btn margin-left-sm">
					提示
				</view>
				<view class="flex-sub">
					<view class="color-tp margin-left">
						您当前位置附近，有 <text class="text-red text-lg text-bold margin-lr-xs">{{psNum}}</text> 名飞手可接单!
					</view>
				</view>
			</view>

			<view v-if="theme=='farmer'" class="xz-box margin-top" @click="handleCallPhone">
				<view class="flex">
					<view class="flex-sub">
						<view class="wy-text">
							无人机用药、病虫害诊断
						</view>
						<view class="zx-text">
							点击免费咨询
						</view>
					</view>
					<view class="call-img-box">
						<image class="call-img" :src="`${$hd.baseUrl}/images/img-call.png`" mode=""></image>
					</view>
				</view>
			</view>

			<swiper v-if="dataList.length>0" class="swiper" indicator-color="#E1EAF9" indicator-active-color="#006BFE"
				:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in dataList" :key="index">
					<SelectOrder :orderData="item" :orderStatus="assignOrdersStatus" />
				</swiper-item>
				<!-- <swiper-item>
					<SelectOrder />
				</swiper-item> -->
			</swiper>

			<view v-if="theme=='fs'">


				<view class="margin-tb flex align-center justify-between">
					<text class="text-bold text-black text-lg">公海订单</text>
					<view class="text-gray" @click="toOrderCenter">
						<text>全部</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>

				<view class="qd-center margin-tb">
					<text class="qd-text">
						抢单大厅
					</text>
				</view>
				<uv-empty v-if="seaList.length == 0" mode="list"></uv-empty>
				<ItemCard v-else v-for="(item, index) in seaList" :dataItem="item" :key="index" />
			</view>
		</view>

		<TabBar current="home"></TabBar>
	</view>
</template>

<script>
	import ItemCard from '@/components/itemCard/index.vue'
	import SelectOrder from '@/components/selectOrder/index.vue'
	import TabBar from '@/components/tabBar/index.vue'
	import {
		mapGetters
	} from 'vuex'

	export default {
		// dicts: ["assign_orders_status"],
		components: {
			ItemCard,
			SelectOrder,
			TabBar
		},
		computed: {
			...mapGetters(['theme'])
		},
		data() {
			return {
				psNum: uni.$uv.random(1, 5),
				title: 'Hello',
				// bg: require('../../static/img-banner.png'),
				// bgImg: {		'background-image': url("/static/img-banner.png") }
				noticeText: '您有新的指派订单，快去查看吧！',
				showNotice: true,
				dataList: [],
				seaList: [],
				pageScrollTopH: 0,
				pageScrollTop: 0,
				navSt: 'linear-gradient(to right,rgba(0, 0, 0, 0)0%,rgba(0, 0, 0, 0})100%)',
				// navSt: 'rgba(0, 0, 0, 0)'
				assignOrdersStatus: []
			}
		},
		onShareAppMessage() {
			return {
				title: '桂鸟先飞',
				path: '/pages/index/index',
				// imageUrl: ''
			}
		},
		onShareTimeline() {
			return {
				title: '桂鸟先飞',
				path: '/pages/index/index',
				// imageUrl: ''
			}
		},
		// 页面隐藏时取消监听socket消息
		onHide() {
			uni.$off("socketMessage")
		},
		onShow() {
			uni.$uv.http.get('/system/dict/data/type/assign_orders_status').then(res => {
				this.assignOrdersStatus = res.data.map(item => ({
					name: item.dictLabel,
					label: item.dictLabel,
					value: item.dictValue,
					raw: item
				}))
			})
			this.loadData()
			this.navSt = 'rgba(0, 0, 0, 0)'
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onPageScroll(e) {
			this.pageScrollTopH = Math.floor(e.scrollTop);
			// this.pageScrollTop = Math.floor(e.scrollTop);
			let r = this.pageScrollTopH / 100;
			if (r < 0.6) {
				this.navSt = 'rgba(0,0,0,0)'
			} else {
				if (this.theme == 'fs') {
					this.navSt =
						`linear-gradient(to right,rgba(3, 109, 254,${r >= 1 ? 1 : r})0%,rgba(2, 108, 254,${r >= 1 ? 1 : r})100%)`
				} else {
					this.navSt =
						`linear-gradient(to right,rgba(17, 148, 100,${r >= 1 ? 1 : r})0%,rgba(6, 187, 111,${r >= 1 ? 1 : r})100%)`
				}
			}
		},
		methods: {
			handleCallPhone() {
				uni.showLoading()
				this.$http.get('/system/config/phone').then(res => {
					uni.hideLoading()
					if (res.code == 200 && res.data.configValue) {
						uni.makePhoneCall({
							phoneNumber: res.data.configValue, // 电话号码
							success: function() {
								console.log('拨打电话成功');
							},
							fail: function() {
								console.log('拨打电话失败');
							}
						});
					} else {
						uni.showToast({
							icon: 'error',
							title: '暂时无法拨通'
						})
					}
				})
			},
			// 更新经纬度
			updateLocation() {
				this.$http
					.put(
						"/cadre/assignOrder/updateLocation", {}, {
							params: {
								...this.$hd.position
							}
						}
					)
			},
			fetchOpenId() {
				const that = this;
				wx.login({
					success(res) {
						const role = that.$hd.loginRole();
						that.$http.get('/wechat/mini/session', {
							params: {
								code: res.code,
								theme: role
							}
						}).then(data => {
							console.log('openId:', data);
							uni.setStorageSync('openId', data.data);
						});
					}
				});
			},
			async loadData1() {
				try {
					const user = await this.$hd.isLogin();
					// 测试检测未登录，跳转到登录页
					if (!user) {
						// uni.reLaunch({
						// 	url: "/pages/public/login"
						// })
						uni.removeStorageSync('userInfo')
					} else {
						// 当前用户信息
						uni.setStorageSync('userInfo', user)

						// 页面显示时监听socket消息
						uni.$on("socketMessage", data => {

						})

						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log('gcj02', res)
								this.$hd.position = {
									...(this.$hd.position || {}),
									...{
										lng: res.longitude,
										lat: res.latitude,
									}
								}
								this.updateLocation()
								this.loadList();
								this.loadSeaList();
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
								const url =
									`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=5YYBZ-MDK34-EGMU6-KSE7C-YIM66-3DBE6`;
								uni.request({
									url: url,
									method: 'GET',
									success: (mapRes) => {
										console.log('mapRes', mapRes)
										if (mapRes.statusCode === 200) {
											// console.log('位置名称:', mapRes.data.result.address);
											this.$hd.position = {
												...{
													lng: res.longitude,
													lat: res.latitude,
													addr: mapRes.data.result.address,
													city: mapRes.data.result.ad_info?.city,
													district: mapRes.data.result.ad_info
														?.district,
												}
											}
											// 这里可以根据需要处理返回的地址信息
										} else {
											console.error('获取位置信息失败');
										}
									},
									fail: (err) => {
										console.error('请求失败:', err);
									}
								});

							},
							fail: (err) => {
								console.log('获取位置', err)
								if (err.errCode == 2) {
									uni.showToast({
										title: '请开启gps定位！',
										icon: 'none'
									})
								}
							}
						});
						// this.loadList();
						// this.loadSeaList();
						this.getMessageCount();
					}
				} catch (error) {
					uni.removeStorageSync('userInfo')
					console.log('出错了', error)
					uni.authorize({
						scope: 'scope.userLocation',
						success: () => {
							uni.getLocation({
								type: 'gcj02',
								success: (res) => {
									console.log('gcj02', res)
									this.$hd.position = {
											...(this.$hd.position || {}),
											...{
												lng: res.longitude,
												lat: res.latitude,
												// addr: mapRes.data.result.address,
												// city: mapRes.data.result.ad_info?.city,
												// district: mapRes.data.result.ad_info
												// 	?.district,
											}
										},
										this.loadSeaList()
								}
							})
						},
						fail: (err) => {
							console.log('位置权限没有获取：', err)
							uni.showModal({
								title: '需要获取位置信息才能正常使用，请开启定位并授权！',
								showCancel: false,
								success() {
									uni.openSetting({
										success: (res) => {
											console.log('setting', res)
										}
									})
								}
							})
						}
					})

					// uni.reLaunch({
					// 	url: "/pages/public/login"
					// })
				}
			},
			async loadData() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log('gcj02', res)
								this.$hd.position = {
									...(this.$hd.position || {}),
									...{
										lng: res.longitude,
										lat: res.latitude,
									}
								}
								this.updateLocation()
								this.loadList();
								this.loadSeaList();
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
								const url =
									`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=5YYBZ-MDK34-EGMU6-KSE7C-YIM66-3DBE6`;
								uni.request({
									url: url,
									method: 'GET',
									success: (mapRes) => {
										console.log('mapRes', mapRes)
										if (mapRes.statusCode === 200) {
											// console.log('位置名称:', mapRes.data.result.address);
											this.$hd.position = {
												...{
													lng: res.longitude,
													lat: res.latitude,
													addr: mapRes.data.result
														.address,
													city: mapRes.data.result
														.ad_info?.city,
													district: mapRes.data
														.result.ad_info
														?.district,
												}
											}
											// 这里可以根据需要处理返回的地址信息
										} else {
											console.error('获取位置信息失败');
										}
									},
									fail: (err) => {
										console.error('请求失败:', err);
									}
								});
							}
						})
					},
					fail: (err) => {
						console.log('位置权限没有获取：', err)
						uni.showModal({
							title: '需要获取位置信息才能正常使用，请开启定位并授权！',
							showCancel: false,
							success() {
								uni.openSetting({
									success: (res) => {
										console.log('setting', res)
									}
								})
							}
						})
					}
				})
			},
			getphonenumber(e) {
				const detail = e.detail
				if (detail.errMsg === "getPhoneNumber:ok") {
					uni.$uv.http.get(`/login/${detail.code}/${this.theme=='fs'?'farmer':'fs'}`).then((res) => {
						this.logining = false
						if (res.code !== 200) {
							uni.$uv.toast(res.msg)
							return
						}
						uni.setStorageSync("token", res.data);
						this.changeLogin()
					}).catch((err) => {
						uni.$uv.toast('切换失败！')
					});
				}
			},
			changeLogin() {
				// this.$http.post('/logout')
				// uni.removeStorageSync('token');
				// // uni.removeStorageSync('login-type');
				// uni.removeStorageSync('userInfo');
				// uni.reLaunch({
				// 	url: "/pages/public/login"
				// })
				if (this.theme == 'fs') {
					uni.setStorageSync("login-type", 'farmer');
					this.$store.dispatch('themeState/setThemeAction', 'farmer')
				} else {
					uni.setStorageSync("login-type", 'fs');
					this.$store.dispatch('themeState/setThemeAction', 'fs')
				}
				this.fetchOpenId();
				this.loadData()
			},
			loadList() {
				this.$http
					.post(
						"/cadre/assignOrder/listByflyId", {}, {
							params: {
								pageNum: 1,
								pageSize: 6,
								homePage: 1,
								orderType: this.theme == 'fs' ? 2 : 1,
								theme: this.theme == 'fs' ? 2 : 1,
								// status: '3,4,5',
								...(this.$hd.position || {}),
							},
							custom: {
								// toast: true
							}
						}
					)
					.then((res) => {
						uni.stopPullDownRefresh()
						this.dataList = res.data.rows
					})
					.catch((err) => {
						console.log("err", err);
					});
			},
			loadSeaList() {
				this.$http
					.get(
						"/cadre/assignOrder/highSeasList", {
							params: {
								// orderType: 1,
								pageNum: 1,
								pageSize: 10,
								...(this.$hd.position || {}),
							},
							custom: {
								// toast: true
							}
						}
					)
					.then((res) => {
						this.seaList = res.data.rows
					})
					.catch((err) => {
						console.log("err", err);
					});
			},
			onBuilding() {
				uni.showToast({
					title: '正在建设中',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: '/subPages/pages/exceptionList/index'
				// })
			},
			custSevice() {
				const user = uni.getStorageSync('userInfo')
				if (!user) {
					uni.$uv.route("/pages/public/login")
				} else {
					uni.$uv.route('/pages/customerService/index')
				}
			},
			onOrderList() {
				if (this.theme == 'fs') {
					let user = uni.getStorageSync('userInfo');
					if (user) {
						uni.switchTab({
							url: '/pages/order/index'
						})
					} else {
						uni.navigateTo({
							url: "/pages/public/login"
						})
					}
				} else {
					uni.$uv.route('/subPages/pages/bookOrder/index')
					//判断用户是否实名
					// if (user.authStatus == "1") {
					// 	uni.$uv.route('/subPages/pages/bookOrder/index')
					// } else {
					// 	uni.showModal({
					// 		title: '认证提示',
					// 		content: '您还未完成用户认证，请先前往完成认证再进行下单！',
					// 		success: function(res) {
					// 			if (res.confirm) {
					// 				uni.navigateTo({
					// 					url: '/subPages/pages/authInfo/FarmerAuth'
					// 				});
					// 			}
					// 		}
					// 	})
					// }
				}

			},
			handleAddOrder(v) {
				uni.$uv.route('/subPages/pages/bookOrder/index', {
					homeworkType: v
				})
			},
			closeNotice() {
				this.showNotice = false
			},
			toOrderCenter() {
				uni.navigateTo({
					url: '/pages/orderCenter/index'
				})
			},
			getMessageCount() {
				this.$store.dispatch("message/updateMessage");
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.rote-90 {
		display: inline-block;
		transform: rotate(90deg);
	}

	.content {
		height: 100%;
		// background-image: url("/static/img-banner.png");
		background-size: 100% 290px;
		background-repeat: no-repeat;
		// background-position-y: -30px;
	}

	@mixin flex($direction: row) {
		display: flex;
		flex-direction: $direction;
	}

	.uv-nav-slot {
		display: flex;
		align-items: center;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		// opacity: 0.8;
		color: #fff;
		font-weight: 600;
		font-size: 32rpx;
	}

	@font-face {
		font-family: 'DOUYUFont';
		src: url($imagesBasUrl+'/font/douyuFont-2.otf');
	}

	.banner-text {
		height: 502rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.gnzz-text {
			font-family: DOUYUFont;
			font-weight: 400;
			font-size: 50rpx;
			color: #FFFFFF;
			text-shadow: 0rpx 2rpx 5rpx rgba(35, 24, 21, 0.26);
			margin-left: 46rpx;
			margin-bottom: 15rpx;
		}

		.ydnl-text {
			font-family: DOUYUFont;
			font-weight: 400;
			font-size: 50rpx;
			color: #FFFFFF;
			text-shadow: 0rpx 2rpx 5rpx rgba(35, 24, 21, 0.26);
			margin-left: 46rpx;
			margin-bottom: -120rpx;
			text-indent: 1em;
		}

		.gnpt-text {
			font-family: Source Han Sans SC;
			font-weight: 800;
			font-size: 50rpx;
			color: #FFFFFF;
			margin-left: 46rpx;
			margin-bottom: -20rpx;
			text-shadow: 0rpx 6rpx 8rpx rgba(35,24,21,0.25);
		}

		.zypt-text {
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-left: 46rpx;
			margin-bottom: -140rpx;
		}
	}

	.pos-wap {
		position: relative;
		border-top-right-radius: 32rpx;
		border-top-left-radius: 32rpx;
		background-color: #F3F4F5;
		padding-bottom: 50px;

		.kf-service {
			border-radius: 20rpx;
		}


		.ic-img {
			width: 110rpx;
			height: 110rpx;
		}

		.notice-box {
			// background-color: #FFF0D3;
			border-radius: 20rpx;
			overflow: hidden;

			.notice-btn {
				width: 90rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 8rpx;
				// background-color: #FE3566;
				color: #fff;
				text-align: center;
				position: relative;

				&::after {
					content: '';
					width: 8px;
					height: 8px;
					border-radius: 3px;
					position: absolute;
					right: -5px;
					top: 7px;
					background-color: #FFF0D3;
				}
			}
		}

		.qd-center {
			height: 96rpx;
			line-height: 96rpx;
			background-image: url($imagesBasUrl+'/icon-hall.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding-left: 30rpx;

			.qd-text {
				font-family: Source Han Sans SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #FFFFFF;
				text-shadow: 0rpx 4rpx 0rpx rgba(35, 24, 21, 0.1);
				font-style: italic;
				opacity: 0.61;
			}
		}

		.swiper {
			height: 560rpx;
			// height: 280px;
			// height: 325px;
		}

		::v-deep uni-swiper .uni-swiper-dot {
			width: 20px;
			border-radius: 4px;
		}

		.zp_box {
			// position: relative;
			width: 100%;
			height: 210rpx;
			// margin-top: 50rpx;
			border-radius: 20rpx;
			background-image: url($imagesBasUrl+'/img-zpdd.png');
			background-size: 100% 100%;
			display: flex;
			align-items: flex-end;

			.zp-fl {
				margin-left: 200rpx;
				flex: 1;
				height: 130rpx;

				.ord-btn {
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(0, 0, 0, 0.2);
					border-radius: 32rpx;
					color: #006BFE;
				}

				.text-ita {
					font-style: italic;
				}
			}
		}
	}


	.fs {
		.bg1 {
			background: linear-gradient(106deg, #FE3566, #FF5A82);
		}

		.bg2 {
			background: linear-gradient(106deg, #006BFE, #2A84FF);
		}

		.notice-box {
			background-color: #FFF0D3;

			.notice-btn {
				background-color: #FE3566;

				&::after {
					background-color: #FFF0D3;
				}
			}
		}
	}

	.farmer {
		.kf-service {
			height: 380rpx;
			font-weight: 800;
			font-size: 68rpx;
			color: #FFFFFF;
			animation-name: slide;
			animation-duration: 1s;
			animation-iteration-count: infinite;
		}

		.bg1 {
			// background: linear-gradient(106deg, #FE3566, #FF5A82);
			background-image: url($imagesBasUrl+'/farmer/bg-menu-left.png');
			background-size: 100% 100%;
			// padding: 40rpx 0 80rpx;
		}

		.bg2 {
			// background: linear-gradient(106deg, #006BFE, #2A84FF);
			background-image: url($imagesBasUrl+'/farmer/bg-menu-right.png');
			background-size: 100% 100%;
			padding: 40rpx 0 80rpx;
		}

		.notice-box {
			background-color: #FFF0D3;

			.notice-btn {
				background-color: #E7913C;

				&::after {
					background-color: #FFF0D3;
				}
			}
		}
	}

	.color-tp {
		color: #EB872A
	}

	.xz-box {
		width: 100%;
		height: 208rpx;
		background-image: url($imagesBasUrl+'/bg-zx.png');
		background-size: 100% 100%;

		.wy-text {
			font-weight: bold;
			font-size: 34rpx;
			color: #303436;
			margin-top: 71rpx;
			margin-left: 69rpx;
		}

		.zx-text {
			width: 299rpx;
			background: linear-gradient(90deg, #72ff7c, #f1fff7, #D9FCF0);
			border-radius: 10rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #1ECC0D;
			padding: 2rpx 10rpx;
			margin-left: 69rpx;
			margin-top: 10rpx;
		}

		.call-img-box {
			margin-top: 54rpx;
			margin-right: 62rpx;
		}

		.call-img {
			width: 134rpx;
			height: 113rpx;
			animation-name: swing;
			animation-duration: 2s;
			animation-iteration-count: infinite;
		}
	}

	@keyframes swing {
		20% {
			transform: rotate3d(0, 0, 1, 15deg);
		}

		40% {
			transform: rotate3d(0, 0, 1, -10deg);
		}

		60% {
			transform: rotate3d(0, 0, 1, 5deg);
		}

		80% {
			transform: rotate3d(0, 0, 1, -5deg);
		}

		100% {
			transform: rotate3d(0, 0, 1, 0deg);
		}
	}

	@keyframes slide {
		0% {
			transform: scale3d(1, 1, 1);
		}

		50% {
			transform: scale3d(1.05, 1.05, 1.05);
		}

		100% {
			transform: scale3d(1, 1, 1);
		}
	}
</style>
<style>
	uni-swiper .uni-swiper-dot {
		width: 20px;
		border-radius: 4px;
	}
</style>